<template>
  <Container class="brand-list">
    <div class="container-header head-form" slot="header">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="门店类型">
              <Select v-model="list.form.storeTypeId" clearable @on-change="getData" filterable>
                <Option v-for="item in allStoreTypeId" :value="item.storeTypeId" :key="item.storeTypeId">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="品牌">
              <BrandSelect v-model="list.form.brandId" placeholder="全部" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="尺寸">
              <Select v-model="list.form.tiresRim" clearable @on-change="getData" filterable>
                <Option v-for="item in tire_sizeArr" :value="item.value" :key="item.value">{{item.text}}</Option>
              </Select>
            </FormItem>
            <FormItem label="胎面宽">
              <Select v-model="list.form.tiresWidth" clearable filterable placeholder="全部"> 
                <Option v-for='item in tire_widthArr' :value='item.value' :key="item.value">{{item.text}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="花纹">
              <Select v-model="list.form.figure" clearable filterable placeholder="全部"> 
                <Option v-for='item in tire_figure' :value='item.dataValue' :key="item.id">{{item.dataValue}}</Option>
              </Select>
            </FormItem>
            <FormItem label="扁平率">
              <Select v-model="list.form.tiresAspectratio" clearable filterable placeholder="全部"> 
                <Option v-for='item in tire_ratioArr' :value='item.value' :key="item.value">{{item.text}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="生效状态">
              <Select v-model="list.form.isEnabled" clearable @on-change="getData">
                <Option v-for="item in list.options.status" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button
              class="btn-search large"
              type="primary"
              icon="ios-search"
              @click="onSearchBtnClick"
            ></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAdd"
      >添加政策</Button>
      <Button slot="extra" size="large" icon="ios-trash" class="mr" @click="onBatchDelete">批量删除</Button>
      <TabPane label="返利例外政策" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          @on-selection-change="onSelectChange"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import RebateExceptionListData from './list/RebatelExceptionListData'
import { clearEmpty, getTireArr } from '@/util'
import BrandSelect from '@/components/BrandSelect'
export default {
  name: 'policy/rebateException/list',
  components: {
    BrandSelect
  },
  data() {
    return {
      id: '',
      tab: 'tab1',
      allStoreTypeId: [],
      list: RebateExceptionListData,
      options: {
        tableHeight: 300
      },
      ids: [],
      tire_widthArr: [], //胎面宽
      tire_ratioArr: [], //扁平率
      tire_sizeArr: [], //尺寸
      tire_figure: [] //花纹
    }
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onAdd', this.onAdd)
    this.$bus.$on('onEdit', ({ id }) => this.onEdit(id))
    this.$bus.$on('onDelete', this.onDelete)
    this.getType()
    this.getTireData()
    this.getTireFigure()
    this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        storeTypeId: this.list.form.storeTypeId,
        tiresRim: this.list.form.tiresRim,
        brandId: this.list.form.brandId,
        tiresWidth: this.list.form.tiresWidth,
        tiresAspectratio: this.list.form.tiresAspectratio,
        figure: this.list.form.figure,
        isEnabled: this.list.form.isEnabled
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxGet('/setting/rebate_special_policy/page', param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            brandName: item.brandName ? item.brandName : '全部',
            tiresWidth: item.tiresWidth ? item.tiresWidth : '全部',
            tiresAspectratio: item.tiresAspectratio ? item.tiresAspectratio : '全部',
            tiresRim: item.tiresRim ? item.tiresRim : '全部',
            figure: item.figure ? item.figure : '全部',
            purchaseRebate: item.purchaseRebate,
            isEnabled: item.isEnabled,
            storeTypeName: item.storeTypeName ? item.storeTypeName : '全部'
          }
        })
        this.list.status = 'pass'
        this.backTableTop()
      })
      .catch(() => {
        this.list.status = 'error'
      })
    },
    onAdd() {
      this.$router.push('/policy/rebateException/edit')
    },
    onEdit(id) {
      this.$router.push({
        name: 'policy/rebateException/edit',
        query: {
          id
        }
      })
    },
    //门店类型
    getType() {
      this.$ajaxGet('/storeType/findAll').then(data => {
        this.allStoreTypeId = (data || []).map(item => {
          return {
            storeTypeId: item.id,
            name: item.name
          }
        })
      })
    },
    getTireFigure() {
      this.$ajaxGet('/product/common/list/TIRE_FIGURE').then(data =>{
        this.tire_figure = (data || []).map(item =>{
          return {
            dataValue: item.dataValue,
            id: item.id
          }
        })
      })
    },
    getTireData() {
      getTireArr().then(data => {
        this.tire_ratioArr = data.data.aspect_ratio.filter(item => item.val).map(item => { //扁平率
          return {
            value: item.val,
            text: item.val ? item.name : ''
          }
        })
        this.tire_sizeArr = data.data.tire_rim.filter(item => item.val).map(item => { //尺寸
          return {
            value: item.val,
            text: item.name
          }
        })
        this.tire_widthArr = data.data.width.filter(item => item.val).map(item => { //胎面宽
          return {
            value: item.val,
            text: item.name
          }
        })
      })
    },
    onSelectChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    onDelete(id, index) {
			this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前政策？',
        onOk: () => {
          this.$ajaxPost(`/setting/rebate_special_policy/delete/${id}`).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${id}</span> 已被删除。`
            })
            this.list.data.splice(index, 1)
          })
        }
      })
		},
    //批量删除
    onBatchDelete() {
      if (this.ids.length === 0) {
        this.$Message.error('请选择要删除的政策')
        return
      }
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除所选的政策？',
        onOk: () => {
          this.$ajaxPost('/setting/rebate_special_policy/delete/' + this.ids).then(() => {
            this.$Notice.success({
              title: '删除成功'
            })
            this.getData()
          })
        }
      })
    },
    onPageChange(number) {
      this.list.currentPage = number
      this.$router.push({
        name: 'policy/rebateException/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'policy/rebateException/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage
      let table = this.list
      if (table.currentPage !== page) {
        table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  }
}
</script>